<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>游记首页</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <!-- 引入外部的css样式 -->
    <!-- 删除替换的 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/animate.css" type="text/css">
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/font-awesome.css?v=4.4.0" type="text/css">


    <style>
        h4{
            color: grey;
        }
    </style>

</head>

<body>
<%@include file="../common/nav_top.jsp"%>
<!--轮播 - banner - begin-->
<div class="banner_container">
    <div class="container">
        <ul id="banner-box">
            <li style="z-index: 3;opacity: 1;">
                <a href="">
                    <img src="http://pzgv309jp.bkt.clouddn.com/b20d19cf-e0ce-4e74-84c8-d35b3a3404d1.jpg" alt="">
                    <div class="text-box">
                        <p><span>11</span>/Dec.2017</p>
                        <h2>唯有旅行与美食，不负时光</h2>
                    </div>
                </a>
            </li>
            <li style="z-index: 1;opacity: 1;">
                <a href="">
                    <img src="https://n4-q.mafengwo.net/s14/M00/78/71/wKgE2l15xeyAGP_NAAbXnvbYGdA308.jpg?imageMogr2%2Finterlace%2F1"
                         alt="">
                    <div class="text-box">
                        <p><span>11</span>/Dec.2017</p>
                        <h2>印度尼西亚︱我的人生伏笔，从东爪哇到巴厘岛</h2>
                    </div>
                </a>
            </li>
            <li style="z-index: 1;opacity: 1;">
                <a href="">
                    <img src="https://b1-q.mafengwo.net/s15/M00/4E/85/CoUBGV2y4BmAZv2hAB-a2yvCVcI906.png?imageMogr2%2Finterlace%2F1" alt="">
                    <div class="text-box">
                        <p><span>11</span>/Dec.2017</p>
                        <h2>天地山水，超你所愿（附12天加拿大自驾指南）</h2>
                    </div>
                </a>
            </li>
            <li style="z-index: 1;opacity: 1;">
                <a href="">
                    <img src="https://n3-q.mafengwo.net/s15/M00/16/18/CoUBGV2xnO6ALntcAB_DZLkVUnY568.png?imageMogr2%2Finterlace%2F1" alt="">
                    <div class="text-box">
                        <p><span>11</span>/Dec.2017</p>
                        <h2>锦州 | 2天暴食13顿，这是一座来了没时间观光的城市！</h2>
                    </div>
                </a>
            </li>
            <li style="z-index: 1;opacity: 1;">
                <a href="">
                    <img src="https://b3-q.mafengwo.net/s14/M00/43/49/wKgE2l12JriAGm53AAduwcseKIs827.jpg?imageMogr2%2Finterlace%2F1"
                         alt="">
                    <div class="text-box">
                        <p><span>11</span>/Dec.2017</p>
                        <h2>澳之秘境，倾翻的浪漫盐池——西澳南澳自驾笔记</h2>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <ul id="banner-index-box" class="banner-index-box">
        <li class="banner-index-active">
            <img src="http://pzgv309jp.bkt.clouddn.com/b20d19cf-e0ce-4e74-84c8-d35b3a3404d1.jpg" alt="">
            <span></span>
        </li>
        <li>
            <img src="https://n4-q.mafengwo.net/s14/M00/78/71/wKgE2l15xeyAGP_NAAbXnvbYGdA308.jpg?imageMogr2%2Finterlace%2F1"
                 alt="">
            <span></span>
        </li>
        <li>
            <img src="https://b1-q.mafengwo.net/s15/M00/4E/85/CoUBGV2y4BmAZv2hAB-a2yvCVcI906.png?imageMogr2%2Finterlace%2F1" alt="">
            <span></span>
        </li>
        <li>
            <img src="https://n3-q.mafengwo.net/s15/M00/16/18/CoUBGV2xnO6ALntcAB_DZLkVUnY568.png?imageMogr2%2Finterlace%2F1" alt="">
            <span></span>
        </li>
        <li>
            <img src="https://b3-q.mafengwo.net/s14/M00/43/49/wKgE2l12JriAGm53AAduwcseKIs827.jpg?imageMogr2%2Finterlace%2F1"
                 alt="">
            <span></span>
        </li>
    </ul>
</div>



<!-- 轮播 end -->
<%--分页--%>
<div id="con">

</div>


<%@include file="../common/nav_bottom.jsp"%>

<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<!-- <script src="../../plugins/bootstrap/js/bootstrap.js"></script> -->
<script src="${path}/plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- 自定义js -->
<%--<script src="../../js/content.js?v=1.0.0"></script>--%>
<script src="${path}/js/index/lunbo.js"></script>


<script>

    $(function(){
        //如果js和jsp在同一个文件中,那么可以在js中使用EL表达式
        //如果js是单独的外部文件,则不允许使用EL表达式
        $("#con").load("${path}/find");
    });

    $('#brand-waterfall').cascade();

    function find() {
        var title = document.getElementById("searchTitle").value;

        <%--window.location='${path}/find?title='+title;--%>
        $("#con").load("${path}/find",{title:title});

    }
    function hot() {

        //点击是高亮
        $("#hot").addClass('active');
        var li = document.getElementsByTagName("li");

        $("#con").load("${path}/find");
    }
    function newNotes() {
        $("#newNotes").addClass('active');
        <%--window.location='${path}/note_index';--%>
        $("#con").load("${path}/note_index");
    }



</script>


</body>

</html>